$(function () {
       //主轮播图
       $("#bannerInner").tyslide({
        boxh: 420, //盒子的高度
        w: 1000, //盒子的宽度
        h: 390, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20, //控制按钮宽度
        controlsH: 20, //控制按钮高度
        radius: 50, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
    });

       // 电子书
       $("#ebook .listbox").tyslide({
        boxh:219,//盒子的高度
        w:332,//盒子的宽度
        h:219,//图片的高度
        isShow:true,//是否显示控制器
        isShowBtn:true,//是否显示左右按钮
        controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW:20,//控制按钮宽度
        controlsH:4,//控制按钮高度
        radius:0,//控制按钮圆角度数
        controlsColor:"#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor:"#95d46c",//当前控制按钮的颜色
        isShowNum:false //是否显示数字
    });


    

        //jquery的方法
        $('#ebook .title ul li').hover(function(){
          //给当前li添加类名active ,兄弟li去类名
          $(this).addClass('active').siblings().removeClass('active');

          //获取当前li的索引
          // index() 不传递参数，返回这个元素在同辈中的索引位置
          let index=$(this).index();

          //设置当前ul对应的类名 on 其它ul去掉类名 on
          $('#ebook .content>ul').eq(index).addClass('on').siblings().removeClass('on');

      })
      
      // 服装

      $("#cloth .listbox").tyslide({
        boxh:219,//盒子的高度
        w:432,//盒子的宽度
        h:219,//图片的高度
        isShow:true,//是否显示控制器
        isShowBtn:true,//是否显示左右按钮
        controltop:10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW:20,//控制按钮宽度
        controlsH:4,//控制按钮高度
        radius:0,//控制按钮圆角度数
        controlsColor:"#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor:"#95d46c",//当前控制按钮的颜色
        isShowNum:false //是否显示数字
    });


    $("#bannerInner3").tyslide({
      boxh: 432, //盒子的高度
      w: 432, //盒子的宽度
      h: 286, //图片的高度
      isShow: true, //是否显示控制器
      isShowBtn: true, //是否显示左右按钮
      controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 10, //控制按钮宽度
      controlsH: 5, //控制按钮高度
      radius: 0, //控制按钮圆角度数
      controlsColor: "#d7d7d7", //普通控制按钮的颜色
      controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
      isShowNum: false //是否显示数字
  });

  $("#bannerInner4").tyslide({
    boxh: 432, //盒子的高度
    w: 432, //盒子的宽度
    h: 286, //图片的高度
    isShow: true, //是否显示控制器
    isShowBtn: true, //是否显示左右按钮
    controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    controlsW: 10, //控制按钮宽度
    controlsH: 5, //控制按钮高度
    radius: 0, //控制按钮圆角度数
    controlsColor: "#d7d7d7", //普通控制按钮的颜色
    controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
    isShowNum: false //是否显示数字
});
$("#bannerInner5").tyslide({
  boxh: 432, //盒子的高度
  w: 432, //盒子的宽度
  h: 286, //图片的高度
  isShow: true, //是否显示控制器
  isShowBtn: true, //是否显示左右按钮
  controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
  controlsW: 10, //控制按钮宽度
  controlsH: 5, //控制按钮高度
  radius: 0, //控制按钮圆角度数
  controlsColor: "#d7d7d7", //普通控制按钮的颜色
  controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
  isShowNum: false //是否显示数字
});




    
        //jquery的方法
        $('#cloth .title ul li').hover(function(){
          //给当前li添加类名active ,兄弟li去类名
          $(this).addClass('active').siblings().removeClass('active');

          //获取当前li的索引
          // index() 不传递参数，返回这个元素在同辈中的索引位置
          let index=$(this).index();

          //设置当前ul对应的类名 on 其它ul去掉类名 on
          $('#cloth .content>ul').eq(index).addClass('on').siblings().removeClass('on');

      })
      

      // 运动

      $("#bannerInner6").tyslide({
        boxh: 432, //盒子的高度
        w: 432, //盒子的宽度
        h: 286, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 10, //控制按钮宽度
        controlsH: 5, //控制按钮高度
        radius: 0, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });

      $("#bannerInner7").tyslide({
        boxh: 432, //盒子的高度
        w: 432, //盒子的宽度
        h: 286, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 10, //控制按钮宽度
        controlsH: 5, //控制按钮高度
        radius: 0, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });

      $("#bannerInner8").tyslide({
        boxh: 432, //盒子的高度
        w: 432, //盒子的宽度
        h: 286, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 10, //控制按钮宽度
        controlsH: 5, //控制按钮高度
        radius: 0, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });


      $("#bannerInner9").tyslide({
        boxh: 432, //盒子的高度
        w: 432, //盒子的宽度
        h: 286, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 10, //控制按钮宽度
        controlsH: 5, //控制按钮高度
        radius: 0, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });

      $("#bannerInner10").tyslide({
        boxh: 432, //盒子的高度
        w: 432, //盒子的宽度
        h: 286, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 150, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 10, //控制按钮宽度
        controlsH: 5, //控制按钮高度
        radius: 0, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });

         //jquery的方法
         $('#sports .title ul li').hover(function(){
          //给当前li添加类名active ,兄弟li去类名
          $(this).addClass('active').siblings().removeClass('active');

          //获取当前li的索引
          // index() 不传递参数，返回这个元素在同辈中的索引位置
          let index=$(this).index();

          //设置当前ul对应的类名 on 其它ul去掉类名 on
          $('#sports .content>ul').eq(index).addClass('on').siblings().removeClass('on');

      })

      
        //jquery的方法
        $('#chlidren .title ul li').hover(function(){
          //给当前li添加类名active ,兄弟li去类名
          $(this).addClass('active').siblings().removeClass('active');

          //获取当前li的索引
          // index() 不传递参数，返回这个元素在同辈中的索引位置
          let index=$(this).index();

          //设置当前ul对应的类名 on 其它ul去掉类名 on
          $('#cloth .content>ul').eq(index).addClass('on').siblings().removeClass('on');

      })
      
      // 电子书
      // $('#ebook .rightbox ul li').hover(function(){
        // alert(11);
        //   $('h4', this).addClass('hide')
        //   // $(this).find('h4').addClass('hide');
        //  $('div',this).removeClass('hide')

        //  $(this).siblings().find('h4').removeClass('hide');
        //  $(this).siblings().find('div').removeClass('hide')
      // })

      $('#ebook .rightbox ul li').hover(function(){
           $('h4', this).addClass('hide')
          // $(this).find('h4').addClass('hide');
         $('div',this).removeClass('hide')

         $(this).siblings().find('h4').removeClass('hide');
         $(this).siblings().find('div').addClass('hide')
      })
      
   //固定头部效果
    /* 
        思路:
            1.注册window上滚动事件  onscroll
            2.获取滚动条距离顶部的距离 
            3.判断 如滚动条距离 > 300 

                满足条件:  显示固定头部
                不满足条件: 隐藏固定头部


    
    */
   $(window).scroll(function(){
    // console.log(1);
    //获取滚动条的距离  scrollTop()
    let sTop=$(this).scrollTop();
    // console.log(sTop)

    //判定  sTop>300  显示固定头部 否则 隐藏固定头部
    if(sTop>300){
        //显示
        $('#fixedHeader').slideDown();
        //把头部中的search 添加到 固定头部中
        $('#header .search').appendTo('#fbox');

    }else{
         //隐藏
         $('#fixedHeader').slideUp();

         //把固定头部中的search 放回到头部指定位置
         $('#fbox .search').appendTo('.souil')
    }
})

   
    //方式二: 先在标签上自定义属性保存颜色

    $('#floorbox ul li').hover(function(){
      //获取到当前li标签上的bgc的值
      let bgColor=$(this).attr('bgc')

      //移入
      $(this).css({
          width:'80px',
          backgroundColor:bgColor,
          backgroundPositionX:'-40px'
      })
      },function(){
      //移出
      $(this).css({ 
          width:'',
          backgroundColor:'',
          backgroundPositionX:''
      })
  }).click(function(){
    //获取当前li标签的索引值
    let index=$(this).index();

    //获取当前li标签对应的楼层 ==> 当前楼层距离顶部的距离

    let sfloor=$('.allfloor').eq(index).offset().top;

    //把当前楼层的距离设置到 滚动条上
    $('html,body').animate({'scrollTop':sfloor-50},500);

})



})

      


